<template>
    <z-popup :show="show" @update:show="updateShow" position="bottom" style="border-radius:24px 24px 0px 0px;">
        <van-picker-group 
            class="z-picker" 
            :title="title" 
            @cancel="onCancel" 
            :tabs="tabsArr" 
            :next-step-text="nextStepText"
            v-model:active-tab="activeTab"
            @confirm="onConfirm($event)"
        >
            <van-date-picker
                v-model="startDate"
                :min-date="startMinDate"
                :max-date="startMaxDate"
            />
            <van-time-picker :min-time="startMinTime" :max-time="startMaxTime" v-model="startTime" :filter="filter"/>
            <van-date-picker
                v-model="endtDate"
                :min-date="endMinDate"
                :max-date="endMaxDate"
                v-if="type=='dateTimeRange'"
            />
            <van-time-picker :min-time="endMinTime" :max-time="endMaxTime"  v-model="endTime" v-if="type=='dateTimeRange'"   />
        </van-picker-group>
    </z-popup>
</template>
<script setup>
import dayjs from "dayjs"
const props = defineProps({
    // dateTime:日期时间选择、dateTimeRange日期时间区间选择
    type: {
        type: String,
        default: 'dateTime'
    },
    show: {
        type: Boolean,
        default: false
    },
    // 选择器头部
    title: {
        type: String,
        default: ''
    },
    // 选项卡展示的内容
    tabs: {
        type: Array,
        default: ['选择日期', '选择时间']
    },
    // 下一个步骤的按钮
    nextStepText: {
        type: String,
        default: '下一步'
    },
    // 开始最小日期
    startMinDate: {
        type: Date,
        default: dayjs().subtract(dayjs().format('YYYY')-2023+3, 'year').toDate()
    },
    // 结束最小日期
    endMinDate: {
        type: Date,
        default: dayjs().subtract(dayjs().format('YYYY')-2023+3, 'year').toDate()
    },
    // 展示最大日期
    startMaxDate: {
        type: Date,
    },
    // 结束最大日期
    endMaxDate: {
        type: Date,
    },
    // 开始最小时间
    startMinTime: {
        type: String,
        default: dayjs().startOf('day').format('HH:mm:ss')
    },
    // 开始最大时间
    startMaxTime: {
        type: String,
        default: dayjs().endOf('day').format('HH:mm:ss')
    },
    // 结束最小时间
    endMinTime: {
        type: String,
        default: dayjs().startOf('day').format('HH:mm:ss')
    },
    // 结束最大时间
    endMaxTime: {
        type: String,
        default: dayjs().endOf('day').format('HH:mm:ss')
    },
    // 开始日期
    startDate: {
        type: Array,
        default: dayjs().subtract(1, 'month').format('YYYY-MM-DD').split('-')
    },
    // 开始时间
    startTime: {
        type: Array,
        default: dayjs().format('HH:mm').split(':')
    },
    // 结束日期
    endtDate: {
        type: Array,
        default: dayjs().format('YYYY-MM-DD').split('-')
    },
    // 结束时间
    endTime: {
        type: Array,
        default: ['23','59']
    },
    // 当前选中标签
    activeTab: {
        type: [Number, String],
        default: 0
    },
    // 过滤时间
    filter:{
        type: Function
    }

});

const startMinDate = ref(props.startMinDate)
const startMaxDate = ref(props.startMaxDate)
const startMinTime = ref(props.startMinTime)
const startMaxTime = ref(props.startMaxTime)
const endMinDate = ref(props.endMinDate)
const endMaxDate = ref(props.endMaxDate)
const endMinTime = ref(props.endMinTime)
const endMaxTime = ref(props.endMaxTime)

const activeTab = ref(props.activeTab)
const startDate = ref(props.startDate);
const startTime = ref(props.startTime);
const endtDate = ref(props.endtDate);
const endTime = ref(props.endTime);
const tabsArr = ref(props.tabs)
const filter = ref(props.filter)
const emits = defineEmits(['update:show', 'cancel', 'confirm']);

const updateShow = (value) => {
    emits('update:show', value);
};

const onCancel = (ev) => {
    emits('cancel', ev);
    emits('update:show', false);
}

const onConfirm = (ev) => {
    const len = unref(tabsArr).length-1
    const time = props.type=='dateTime'?unref(startTime).join(':')+':00':unref(endTime).join(':')+':00'
    tabsArr.value[len] = time
    emits('confirm', ev);
}

const pattern = /[\u4e00-\u9fa5]/;
watch(activeTab, (nVal, oVal)=>{
    switch(oVal) {
        case 0:
            unref(tabsArr)[oVal] = unref(startDate).join('-')
            endMinDate.value = dayjs(unref(tabsArr)[oVal]).toDate()
            break;
        case 1:
            unref(tabsArr)[oVal] = unref(startTime).join(':')+':00'
            // endMinTime.value = unref(tabsArr)[oVal] // 赋值结束最小时间
            break;
        case 2:
            unref(tabsArr)[oVal] = unref(endtDate).join('-')
            break;
        case 3:
            unref(tabsArr)[oVal] = unref(endTime).join(':')+':00'
            break; 
    }
})

</script>
<style scoped lang="scss">
@import './styles.scss';
</style>










